<template>
  <el-container class="home_container">
    <!-- 左边侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <div class="btn" @click="layout()" v-show="!isCollapse">
        前往门户
      </div>
      <div class="userInfo">
        <img src="../assets/hj.png" alt="" />
        <div class="userInfo_right">
          <ul>
            <li>韩捷</li>
            <li>
              <span><span class="iconfont icon-zaixiankefu"></span>在线</span>
              <span
                ><span class="iconfont icon--cangpinzhuxiaoshenpi"></span
                >注销</span
              >
            </li>
          </ul>
        </div>
      </div>
      <!-- 菜单区域 -->
      <el-menu
        background-color="#2F4050"
        text-color="#A7B1C2"
        unique-opened
        :collapse="isCollapse"
        :collapse-transition="false"
        router
      >
        <!-- 一级菜单 -->
        <el-submenu index="1">
          <!-- 一级菜单模板区域 -->
          <template slot="title">
            <!-- 图标 -->
            <i class="iconfont icon-gerenzhongxin"></i>
            <!-- 文本 -->
            <span>系统管理</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item index="yonghgl">用户管理</el-menu-item>
          <el-menu-item index="role">角色管理</el-menu-item>
          <el-menu-item index="echart">菜单管理</el-menu-item>
          <el-menu-item index="weather">部门管理</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <!-- 一级菜单模板区域 -->
          <template slot="title">
            <!-- 图标 -->
            <i class="iconfont icon-jiankong"></i>
            <!-- 文本 -->
            <span>系统监控</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item index="2-1">在线用户</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <!-- 一级菜单模板区域 -->
          <template slot="title">
            <!-- 图标 -->
            <i class="iconfont icon-ziliaoneirongguanli_huaban"></i>
            <!-- 文本 -->
            <span>系统工具</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item index="3-1">招聘管理</el-menu-item>
          <el-menu-item index="3-2">版主个人申请管理</el-menu-item>
          <el-menu-item index="3-3">版主单位申请管理</el-menu-item>
          <el-menu-item index="3-4">加入志愿者管理</el-menu-item>
          <el-menu-item index="3-5">加入团体管理</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <!-- 一级菜单模板区域 -->
          <template slot="title">
            <!-- 图标 -->
            <i class="iconfont icon-diannao"></i>
            <!-- 文本 -->
            <span>内容管理</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item index="4-1">星城园丁</el-menu-item>
          <el-menu-item index="4-2">招聘发布</el-menu-item>
          <el-menu-item index="4-3">96111</el-menu-item>
          <el-menu-item index="4-4">文章管理</el-menu-item>
          <el-menu-item index="4-5">评论管理</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <!-- 一级菜单模板区域 -->
          <template slot="title">
            <!-- 图标 -->
            <i class="iconfont icon-xitonggongju"></i>
            <!-- 文本 -->
            <span>实例演示</span>
          </template>
          <!-- 三级菜单 -->
          <el-submenu index="5-1">
            <template slot="title">
              <!-- 文本 -->
              <span>表单</span>
            </template>
            <el-menu-item index="5-1-1">按钮</el-menu-item>
            <el-menu-item index="5-1-2">栅格</el-menu-item>
          </el-submenu>
          <el-submenu index="5-2">
            <template slot="title">
              <!-- 文本 -->
              <span>表格</span>
            </template>
            <el-menu-item index="5-2-1">查询条件</el-menu-item>
            <el-menu-item index="5-2-2">信息汇总</el-menu-item>
          </el-submenu>
          <el-submenu index="5-3">
            <template slot="title">
              <!-- 文本 -->
              <span>弹框</span>
            </template>
            <el-menu-item index="5-3-1">模态窗口</el-menu-item>
            <el-menu-item index="5-3-2">弹层组织</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <div class="toggle_btn" @click="toggleCollapse">|||</div>
        <div>
          <el-menu
            mode="horizontal"
            background-color="#3C8DBC"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="1">
              <template slot="title">
                <!-- 图标 -->
                <i class="iconfont icon-jiankong"></i>
                <!-- 文本 -->
                <span>视频教程</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2">
              <template slot="title">
                <!-- 图标 -->
                <i class="iconfont icon-dingzhihuakaifa"></i>
                <!-- 文本 -->
                <span>开发文档</span>
              </template>
            </el-menu-item>
            <el-menu-item
              index="3"
              @click="click"
              :class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
            >
              <template slot="title">
                <!-- 图标 -->
                <i class="iconfont icon-quanping"></i>
                <!-- 文本 -->
                <span>全屏显示</span>
              </template>
            </el-menu-item>
            <el-submenu index="4">
              <template slot="title">
                <img src="../assets/hj.png" alt="" class="img" />
                韩捷
              </template>
              <el-menu-item index="4-1"
                ><i class="el-icon-location"></i
                ><span>个人中心</span></el-menu-item
              >
              <el-menu-item index="4-2"
                ><i class="el-icon-location"></i
                ><span>修改密码</span></el-menu-item
              >
              <el-menu-item index="4-3"
                ><i class="el-icon-location"></i
                ><span>切换主题</span></el-menu-item
              >
              <el-menu-item index="4-4"
                ><i class="el-icon-location"></i
                ><span>退出登录</span></el-menu-item
              >
            </el-submenu>
          </el-menu>
        </div>
      </el-header>
      <!-- 内容区域 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// 导入sreenfull插件，npm install --save screenfull
import screenfull from 'screenfull'

export default {
  name: 'screenfull',
  data() {
    return {
      isCollapse: false,
      // 默认不全屏
      isFullscreen: false
    }
  },
  methods: {
    layout() {
      this.$router.push('/login')
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    click() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    },
    change() {
      this.isFullscreen = screenfull.isFullscreen
    },
    init() {
      if (screenfull.enabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {
      if (screenfull.enabled) {
        screenfull.off('change', this.change)
      }
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.destroy()
  }
}
</script>

<style lang="less" scoped>
.home_container {
  height: 100%;
}
.el-header {
  display: flex;
  justify-content: space-between;
  background-color: #3c8dbc;
  .toggle_btn {
    color: #fff;
    transform: rotate(90deg);
    cursor: pointer;
  }
  .img {
    width: 27x;
    height: 27px;
    border-radius: 50%;
  }
  .el-menu-item i {
    padding: 5px;
    color: #fff;
  }
}
.el-aside {
  background-color: #2f4050;
  .el-menu {
    border-right: none;
  }
  .btn {
    background-color: #367fa9;
    height: 60px;
    width: 200px;
    outline: none;
    border: none;
    padding: 0px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
  }
  .userInfo {
    display: flex;
    color: #fff;
    height: 75px;
    font-size: 12px;
    padding: 2px;
    > img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      padding: 10px 0px 10px 10px;
    }
    .userInfo_right {
      margin-left: -30px;
      li {
        padding: 3px;
        span {
          padding: 2px;
        }
      }
    }
  }
  .el-submenu i {
    padding: 5px;
  }
}
.el-main {
  background-color: #f3f3f4;
}
</style>
